<template>
	<div class="user-info">
		<image class="avatar" src="../../static/logo.png"></image>
		&nbsp;&nbsp;&nbsp;
		<scan v-if="NoLogin === true">
			<span @click="ToLogin">登录/注册</span>
		</scan>
		<scan v-if="NoLogin === false">
			{{info.user_name}}
		</scan>
	</div>
	
	<div style="margin-top: 20px ;">
		<view  class="container">
		  <!-- 列表项 -->
		  <view class="list-item">
			  <image src="../../Resources/Image/个人信息.png" class="my-icon"></image>
			  &nbsp;
		    <text class="item-name">个人资料</text>
		    <text class="item-extra">></text>
		  </view>
		  <view class="list-item">
			  <image src="../../Resources/Image/等待更新.png" class="my-icon"></image>
			  &nbsp;
		    <text class="item-name">即将上线</text>
		    <text class="item-extra">></text>
		  </view>
		  <view class="list-item">
			   <image src="../../Resources/Image/等待更新.png" class="my-icon"></image>
			   &nbsp;
		    <text class="item-name">即将上线</text>
		    <text class="item-extra">></text>
		  </view>
		  <view class="list-item">
			   <image src="../../Resources/Image/等待更新.png" class="my-icon"></image>
			   &nbsp;
		    <text class="item-name">即将上线</text>
		    <text class="item-extra">></text>
		  </view>
		  <view class="list-item">
			   <image src="../../Resources/Image/等待更新.png" class="my-icon"></image>
			   &nbsp;    
		    <text class="item-name">即将上线</text>
		    <text class="item-extra">></text>
		  </view>
		</view>
	</div>

</template>

<script setup>
	
	import { onMounted, ref } from 'vue';
	import { config } from '../../config';
	import { LoginState } from '../../util/LoginSate';
	import { TokenStore } from '../../Store/TokenStore';
	
	let NoLogin = ref(false)
	
	onMounted(()=>{
		MyInfo();
	})
	
	let info = ref({})
	
	function ToLogin(){
		uni.redirectTo({
			url:"/pages/index/index"
		})
	}
	
	function MyInfo(){
		uni.request({
			url:`${config.baseURL}/User/MyInfo`,
			method:'GET',
			header: {
			  'content-type': 'application/json', // 设置请求头为 JSON
			  'Authorization': TokenStore().token // 确保 TokenStore 函数已定义
			},
			success:(res)=>{
				if(res.data.data === 'error'){
					uni.showToast({
					  title: "数据库错误",
					  icon: 'error'
					});
				}
				else {
					console.log("后端返回"+res.data.data);
					if(res.data.data === '令牌过期'){
						NoLogin.value = true;
						return ;
					}
					else {
						NoLogin.value = false;
						info.value = JSON.parse(res.data.data);
					}
				}
			},
			fail:(err)=>{
				uni.showToast({
				  title: err.errMsg,
				  icon: 'error'
				});
			}
		})
	}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column; 
  padding: 20px;
  border: 1px solid #dddddd; /* 灰色实线边框，宽度为1px */
  margin-left: 15px;
  margin-right: 15px;
}

.user-info {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  height: 60px; /* 设置容器高度为60px */
  padding: 30px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  color: #333;
margin-top: 10px;
}

.item-name {
  flex-grow: 1;
}

.my-icon{
	width: 20px;
	height: 20px;
}

.item-extra {
  margin-left: 10px;
  color: #666;
}

.avatar {
  width: 60px; /* 设置宽度为20px */
  height: 60px; /* 设置高度为20px */
  border-radius: 50%; /* 设置边框半径为50%，这样图像就会显示为圆形 */
}
</style>